class ButtonElement extends Element {
  constructor (layoutNode, context) {
    super(layoutNode, context)
    this.borderColor = '#dcdfe6'
    this.backgroundColor = '#ffffff'
    this.labelColor = '#606266'
  }

  draw () {
    let { react, style, label } = this.layoutNode

    // 边框
    let width = react.width
    let height = react.height
    this.roundedRect(
      react.left,
      react.top,
      width,
      height,
      4,
      react.borderColor || this.borderColor
    )
    // 背景
    this.context.fillStyle = react.backgroundColor || this.backgroundColor
    this.context.fill()
    // 文字
    this.context.textBaseline = 'top'
    this.context.font = '14px sans-serif'
    this.context.fillStyle = style.color
    let labelStart = { x: 21, y: 13 }
    let labelWidth = this.context.measureText(label).width
    if (labelWidth < 58) {
      labelStart.x = (100 - labelWidth) / 2
    }
    this.context.fillText(
      label,
      react.left + labelStart.x,
      react.top + labelStart.y
    )
  }
}
